<template>
    <transition name="modal">
        <div class="modal-mask" v-show="open">
            <div class="modal-wrapper">
                <div class="modal-container">
    
                    <div class="modal-header">
                        <div class="row">
                            <div class="col-lg-12">
                                <h4>选择送货员</h4>
                            </div>
                            
                        </div>
                       
                        
                        <button type="button" class="close" @click="$emit('close')">
                            <i class="fa fa-times" aria-hidden="true"></i>
                        </button>
                    </div>
    
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="form-horizontal">
                                    
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">订单号：</label>
                                        <div class="col-sm-10">
                                            <p class="form-control-static">{{recode}}</p>
                                            
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">送货员：</label>
                                        <div class="col-sm-10">
                                            <select class=" form-control" v-model="deliver_id">
                                                <option value="NA">请选择</option>
                                                <template v-for="(item,i) in deliverys">
                                                    <option :value="item.id" :key="i">{{item.str}}</option>
                                                </template>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">&nbsp;</label>
                                        <div class="col-sm-10">
                                            <div class="check-input-btn-box">
                                                <div class="check-input-btn" :class="{'start':check_start}">{{check_start?'开始扫码':'点击扫码'}}</div>
                                                <input type="text" class="check-input" v-model="check_code" @focus="check_start=true" @blur="check_start=false" @keydown.enter="addGoods()">
                                            </div>
                                            
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">菜品：</label>
                                        <div class="col-sm-10">
                                            <div class="flex-list table-style table-striped-style">
                                                <div class="flex-row title-row">
                                                    <div class="flex-2 flex-col">验数完成</div>
                                                    <div class="flex-2 flex-col">菜品code</div>
                                                    <div class="flex-2 flex-col">菜品名</div>
                                                    <div class="flex-1 flex-col">数量</div>
                                                    <div class="flex-1 flex-col">以备数量</div>
                                                    <div class="flex-1 flex-col">操作</div>
                                                </div>
                                                <div class="flex-list-body">
                                                    <template v-for="item in list">
                                                        <div class="flex-row" :key="item.codeId">
                                                            <div class="flex-2 flex-col"><i class="fa fa-check-circle-o " :class="{'text-success':item.qty==item.cqty}"></i></div>
                                                            <div class="flex-2 flex-col">{{item.codeId}}</div>
                                                            <div class="flex-2 flex-col">{{item.name}}</div>
                                                            <div class="flex-1 flex-col">{{item.qty}}</div>
                                                            <div class="flex-1 flex-col">{{item.cqty}}
                                                                
                                                            </div>
                                                            <div class="flex-1 flex-col">
                                                                <a href="###" @click.prevent="resetQty(item)">重置</a>
                                                            </div>
                                                        </div>
                                                    </template>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                </div>
                            </div>
                        </div>
                    </div>
    
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" @click="save"> 保 存 </button>
                        <button type="button" class="btn btn-primary" @click="norecdoeSave"> 跳过验货保存 </button>
                        <button type="button" class="btn btn-default" @click="$emit('close')"> 取 消 </button>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</template>
<script>
import {tip,ajax} from '../../tools/tools.js'

export default {
    name: 'SendOrderModal',
    data() {
        return {
            id:'',
            recode:'',
            
            list:[],
            check_code:'',
            check_start:false,

            deliver_id:'NA',

            deliverys:[
                {
                    id:'326c3529e00711e78b5600163e0adb3f',
                    name:'dm1',
                    str:'何小凯'
                },
                {
                    id:'47d72449e00711e78b5600163e0adb3f',
                    name:'dm2',
                    str:'刘超'
                },
                {
                    id:'5fb48017e00711e78b5600163e0adb3f',
                    name:'dm3',
                    str:'扬诚'
                },
                {
                    id:'f43c26a6-342b-4850-b86e-609bc95a6a43',
                    name:'dm4',
                    str:'马旭'
                },
                {
                    id:'60495977-a275-4fc6-ac6f-24561c148613',
                    name:'dm5',
                    str:'面窝'
                },
                {
                    id:'eefc5259fc6611e78b5600163e0adb3f',
                    name:'dm6',
                    str:'汉口01'
                }
            ]

        }
    },
    props:{
        open:{
            type:Boolean,
            default:false
        },
        dataObj:{
            type:Object,
            default:function(){
                return null
            }
        }
    },
    filters:{
        advStr(v){
            var sObj = {
                '0':'否',
                '1':'是'
            }

            return sObj[v];
        }
    },
    watch:{
        open(v,ov){
            var self = this;
            if(v){
                self.clearData();
                self.id = self.dataObj.id;
                self.recode = self.dataObj.receiptCode;
                console.log(self.dataObj.details)
                self.list = self.dataObj.details.map((g,i)=>{
                    g.cqty = 0;
                    g.isOk = false;
                    return g;
                });
            }
        },
        // dataObj:{
        //     deep:true,
        //     hander(v,ov){

        //     }
        // }
    },
    methods: {
        clearData(){
            this.id = '';
            this.recode = '';
            
            this.list = [];

            this.deliver_id = 'NA';
        },
        addGoods(){
            var self = this;
            self.list = self.list.map((v,i)=>{
                if(v.codeId==self.check_code){
                    v.cqty++;
                }

                return v;
            })

            self.check_code = '';
        },
        resetQty(v){
            var self = this;
            self.list = self.list.map((g,i)=>{
                if(g.codeId==v.codeId){
                    g.cqty = 0;
                }
                return g;
            })
        },
        save(){
            var self = this;
            if(self.deliver_id=='NA'){
                tip.warn('请选择送货员');
                return;
            }

            var good_ready = true;
            self.list.map((v,i)=>{
                if(v.qty!=v.cqty){
                    good_ready = false;
                }
            })

            if(good_ready==false){
                tip.warn('请验明货物');
                return;
            }

            ajax.updateOrderState({
                type:'post',
                param:{
                    id:self.id,
                    state:'3',
                    deliver:self.deliver_id,
                    token:localStorage.token
                },
                cb(data){
                    self.$emit('donesend');
                }
            })
        },
        norecdoeSave(){
            var self = this;
            console.log(self.deliver_id);
            if(self.deliver_id=='NA'){
                tip.warn('请选择送货员');
                return;
            }
            ajax.updateOrderState({
                type:'post',
                param:{
                    id:self.id,
                    state:'3',
                    deliver:self.deliver_id,
                    token:localStorage.token
                },
                cb(data){
                    self.$emit('donesend');
                }
            })
        }
    },
    mounted() {
        
    }
}
</script>
<style scoped>
.close {
        position: absolute;
        right: 30px;
        top: 30px;
    }

    .modal-mask {
        position: fixed;
        z-index: 10001;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: rgba(0, 0, 0, .5);
        transition: opacity .3s ease;
    }

    .limte-height {
        max-height: 550px;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .modal-container {
        position: absolute;
        left: 20px;
        top: 70px;
        bottom: 20px;
        right: 20px;
        padding: 20px 30px;
        background-color: #fff;
        border-radius: 2px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
        transition: all .3s ease;
        overflow-y: auto;
    }

    .modal-header h3 {
        margin-top: 0;
        color: #42b983;
    }

    .modal-default-button {
        float: right;
    }

    .modal-enter {
        opacity: 0;
    }

    .modal-leave-active {
        opacity: 0;
    }

    .modal-enter .modal-container,
    .modal-leave-active .modal-container {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    .check-input-btn-box{
        position: relative;
        height: 60px;
    }

    .check-input-btn{
        position: absolute;
        top: 0px;
        left: 0px;
        width: 150px;
        height: 50px;
        font-size: 20px;
        line-height: 50px;
        box-sizing: border-box;
        background-color: #aaa;
        color: #fff;
        text-align: center;
    }

    .check-input-btn.start{
        background-color: #ff9900;
        color: #fff;
    }

    .check-input{
        position: absolute;
        top: 0px;
        left: 0px;
        width: 150px;
        height: 50px;
        font-size: 20px;
        line-height: 50px;
        opacity: 0.1;
        border: none;
        box-sizing: border-box;
    }
</style>
